<template>
  <div class="businessProcess">
    <div class="header">
      <van-nav-bar title="流程操作端" fixed left-text="返回" right-text left-arrow @click-left="onClickLeft"/>
    </div>
    <section class="section">
      <div class="registration_from">
        <p>客户选择</p>
        <div class="xiala">
          <input type="text" placeholder="选择办理人发送办理流程" :value="radioData"  readonly="readonly" @click="addressShow()">
          <img src="../../assets/images/greenFinance/12.png">
        </div>
      </div>
      <div class="registration_from">
        <h6>（单选）已添加流程</h6>
        <div class="registration_from_div">
          <div class="gudong">
            <van-radio-group v-model="resultInfo">
              <ul class="">
                <li v-for="(item, index) in shareholderInfoList" class="scgd">
                  <van-radio :name="item.id" checked-color="#07c160">{{item.flowName}}</van-radio>
                </li>
              </ul>
            </van-radio-group>
          </div>
        </div>
      </div>
    </section>
    <footer>
      <div class="foot">
        <div class="footer_left" @click="toRegistration()" v-show="Settlement">
          完成结算
        </div>
        <div class="footer_left1" v-show="Settlement1">
          已结算
        </div>
        <div class="footer_right" @click="sendShow()">
          发送
        </div>
      </div>

    </footer>

    <van-popup v-model="show">
      <van-radio-group v-model="radioData">
        <p class="p1">办理意向</p>
        <ul class="yi">
          <li v-for="(item, index) in list">
            <van-radio :name="item.legal_person" checked-color="#07c160">{{item.legal_person}}</van-radio>
          </li>
        </ul>
        <div class="ok" @click="OK()">确定</div>
      </van-radio-group>
    </van-popup>
  </div>
</template>

<script>
  export default {
    name: "FTProcess",
    data() {
      return {
        show:false,
        list: [],
        shareholderInfoList: [],
        checked: true,
        resultInfo:'',
        Settlement:true,
        Settlement1:false,
        radioData:'',
      }
    },
    mounted() {
      this.getCustomer()
      this.getBusinessRegisterFlow()
    },
    methods: {
      //返回
      onClickLeft() {
        this.$router.go(-1);
      },
      addressShow(){
        this.show=true
      },
      OK(){
        this.show=false
      },

      //获取客户
      async getCustomer(){
        const res = await this.$axios.post(this.$api.FTProcessData);
        if (res.success) {
          this.list=res.data
        } else {
          this.$toast(res.msg);
        }
      },
      //获取查询流程
      async getBusinessRegisterFlow(){
        const res = await this.$axios.post(this.$api.FTProcessDataList);
        if (res.success) {
          this.shareholderInfoList=res.data
        } else {
          this.$toast(res.msg);
        }
      },
      //发送
      async sendShow(){
        let  arr=[];
        this.list.forEach((item,index)=>{
          if(item.legal_person==this.radioData){
            arr.push(item.sl_commission_id);
            arr.push(item.phone);
          };
        });
        console.log(arr);
        let params = {
          sl_commission_id:arr[0],
          phone:arr[1],
          flow_id:this.resultInfo
        };
        const res = await this.$axios.post(this.$api.sendFTProcessData, params);
        if (res.success) {
          this.$toast(res.msg);
          this.resultInfo=''
          this.radioData=''
        } else {
          this.$toast(res.msg);
        }
      },


      //已结算

      async toRegistration(){
        let  arr=[];
        this.list.forEach((item,index)=>{
          if(item.legal_person==this.radioData){
            arr.push(item.sl_commission_ft_id);
          };
        });
        let params = {
          sl_commission_ft_id: arr.join(''),
        };
        const res = await this.$axios.post(this.$api.sendFTProcessList, params);
        if (res.success) {
          this.Settlement=false;
          this.Settlement1=true;
        } else {
          this.Settlement=true;
          this.Settlement1=false;
        }
      },

    }
  }
</script>

<style scoped>
  .businessProcess{width: 100%;background-color: #fff;height: 100vh;}
  section{margin-top: 0.46rem;}
  .section{padding-top: 0.15rem;}
  .registration_from{overflow: hidden;width: 100%;line-height: 0.45rem;}
  .registration_from p{float: left;width: 23%;text-align: center;}
  .registration_from h6{padding: 0 0.23rem 0 0.15rem;}
  .xiala{width: 69%;border-radius: 0.05rem;float: right;overflow: hidden;background-color: #f2f2f2;margin-bottom: 0.1rem;margin-right: 0.21rem;}
  .xiala input{float: left;height: 0.4rem;width: 87%;background-color: #f2f2f2;border: 0;border-radius: 0.05rem;padding-left: 0.1rem;}
  .xiala img{float: left;width: 0.15rem;margin-top: 0.15rem;}
  .p1{text-align: center;}
  .van-popup{width: 80%;border-radius: 0.05rem;padding: 0.2rem 0;}
  .scgd{overflow: hidden;margin: 0.1rem 0 0;line-height: 0.2rem;border: 1px solid #e6e6e6;border-radius: 0.05rem;padding: 0.1rem;}
  .gudong{margin: 0 0.12rem;}
  footer{width: 100%;padding: 0.2rem 0;background-color: #fff;}
  .foot{overflow: hidden;width: 90%;margin: 0 auto;height: 0.42rem;text-align: center;}
  .footer_left{width: 50%;float: left;border: 1px solid #01bf47;line-height: 0.4rem;color:#01bf47;border-bottom-left-radius: 0.05rem; border-top-left-radius:  0.05rem;}
  .footer_left1{width: 50%;float: left;background-color: #d9d9d9;line-height: 0.42rem;color:#808080;border-bottom-left-radius: 0.05rem; border-top-left-radius:  0.05rem;}
  .footer_right{width: 50%;float: left;background-color:#01bf47; line-height: 0.42rem;color: #fff;border-top-right-radius: 0.05rem;border-bottom-right-radius: 0.05rem;}
  .yi{margin: 0.1rem auto;width: 90%;}
  .yi li{line-height: 0.2rem;padding:0.02rem 0.1rem;}
  .registration_from_div{background-color: #fff;}
  .registration_from h6 span{float: right}
  .p3{line-height: 0.8rem;text-align: center;font-size: 0.16rem;}
  .ok{width:34%;margin: 0 auto;line-height: 0.3rem;background-color:#01bf47;color: #fff;text-align: center;border-radius: 0.05rem;  }
</style>


